<template>
	<view class="content">
			<g-dropdown>
				<g-dropdown-item></g-dropdown-item>
				<g-dropdown-item></g-dropdown-item>
			</g-dropdown>
		
			<g-cell-group title="系统设置" border>
				<g-cell label='主题' value="value" icon="zhaotoubiaoguanli" @click="handleClick">
					<template slot="left">
						11
					</template>
				</g-cell>
				<g-cell  label='主题' value="value" icon="zhiduguanli">
					
				</g-cell>
			</g-cell-group>
			<g-cell-group title-height="30" border>
				<g-cell label='摄像' value="value" icon="video_fill"></g-cell>
				<g-cell label='任务' value="value" icon="task_fill"></g-cell>
			</g-cell-group>
			<g-cell-group title-height="100" border>
				<g-cell></g-cell>
				<g-cell></g-cell>
			</g-cell-group>
		<view style="width: 70%;">
			<g-checker-group v-model="title" >
				<g-checker label='全部' value="all" disabled></g-checker>
				<g-checker label='标签2' value="biao2"></g-checker>
				<g-checker label='标签3' value="biao3"></g-checker>
				<g-checker label='怕大家' value="biao4"></g-checker>
				<g-checker label='标签5' value="biao5"></g-checker>
				<g-checker label='标签6' value="biao6"></g-checker>
			</g-checker-group>
		</view>
		{{title}}
		<view>
			<g-button-card title="基础信息" :newtips='199' icon="shanchu" bgColor="#3333ff"></g-button-card>
			<g-button-card title="个人代办" :newtips='199' icon="shanchu" bgColor="#ffdd2f"></g-button-card>
			<g-button-card title="系统设置" :newtips='199' icon="shanchu" bgColor="#ff10d4"></g-button-card>
		</view>
		<!-- <g-weckit :visible.sync='visible' title="编辑人员">
			<scroll-view style="height: 100%;" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="#fff"
				@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherabort="onAbort">	
				<view v-for="item in 50">2</view>
				</scroll-view>
			<template slot='foot'>
				<view style="display: flex; justify-content: space-between;padding: 10px 16px;">
					<g-button type="info" size="large" style="width: 100px;margin-right: 5px;">取消</g-button>
					<g-button type="primary" size="large" style="flex:1;">按钮</g-button>
				</view>
			</template>
			<template slot='head-right'>
				<g-button type="success" size="mini"  @handleClick="title='value2'">
					确认
				</g-button>
			</template>
		</g-weckit> -->
		<g-divider></g-divider>
		<g-select v-model="title" :tran-option=" [{value:'value1',label:'显示1'},{value:'value2',label:'显示2'}]"
			placeholder="请选择内容">
		</g-select>
		{{title}}
		<g-tabs :list="list" slotWidth="50">
			<template slot='expand'>
				<view
					style="display: flex; align-items:center; height: 100%;width: 100%;justify-content: center; font-size: 40rpx;"
					@click="handleMask">+</view>
			</template>
		</g-tabs>
		<g-loading type="cube" :visible="loadingVisi" :duraction="2000">
			<template slot='tips'>
				<view class="tipsClass">加载成功</view>
			</template>
		</g-loading>
		<view style="width: 100%;height: 50px; background: #FFFFFF;"></view>
		<view>
			<g-button type="primary" size="mini" @handleClick="number1-=1">
				按钮
			</g-button>
			<g-button type="primary" size="mini" plain @handleClick="number1+=1">
				按钮
			</g-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number1:2,
				triggered: false,
				visible: false,
				title: '',
				status: true,
				loadingVisi: false,
				list: [{
						label: '一项',
						label: '全部'
					},
				],
				steps:[
					{name:'周周',date:'2015-01-02'},
					{name:'提交',date:'2015-01-02'},
				]
			}
		},
		onLoad() {
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)
		},
		methods: {
			handleClick(){
				alert('1')
			},
			onPulling(e) {
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			onAbort() {
			},
			refresherrefresh() {
				this.status = false
			},
			handleMask() {
				this.visible = true
			},
			loadingFn() {
				this.loadingVisi = !this.loadingVisi
			},
			hanleBtn() {
				this.status = true
			},
			test11() {},
		},
		watch: {}
	}
</script>

<style scoped>
	.fixed {
		width: 100vw;
		background: red;
	}

	.tipsClass {
		width: 100%;
		height: 100%;
		background: #00eb89;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
		width: 100%;
		background: #c3c3c3;
	}

	.sk-chase {
		width: 30px;
		height: 30px;
		position: relative;
		animation: sk-chase 2.5s infinite linear both;
	}

	.sk-chase-dot {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		animation: sk-chase-dot 2.0s infinite ease-in-out both;
	}

	.sk-chase-dot:before {
		content: '';
		display: block;
		width: 25%;
		height: 25%;
		background-color: #ffffff;
		border-radius: 100%;
		animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
	}

	.sk-chase-dot:nth-child(1) {
		animation-delay: -1.1s;
	}

	.sk-chase-dot:nth-child(2) {
		animation-delay: -1.0s;
	}

	.sk-chase-dot:nth-child(3) {
		animation-delay: -0.9s;
	}

	.sk-chase-dot:nth-child(4) {
		animation-delay: -0.8s;
	}

	.sk-chase-dot:nth-child(5) {
		animation-delay: -0.7s;
	}

	.sk-chase-dot:nth-child(6) {
		animation-delay: -0.6s;
	}

	.sk-chase-dot:nth-child(1):before {
		animation-delay: -1.1s;
	}

	.sk-chase-dot:nth-child(2):before {
		animation-delay: -1.0s;
	}

	.sk-chase-dot:nth-child(3):before {
		animation-delay: -0.9s;
	}

	.sk-chase-dot:nth-child(4):before {
		animation-delay: -0.8s;
	}

	.sk-chase-dot:nth-child(5):before {
		animation-delay: -0.7s;
	}

	.sk-chase-dot:nth-child(6):before {
		animation-delay: -0.6s;
	}

	@keyframes sk-chase {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes sk-chase-dot {

		80%,
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes sk-chase-dot-before {
		50% {
			transform: scale(0.4);
		}

		100%,
		0% {
			transform: scale(1.0);
		}
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		background: #3c3b3d;
		height: 100vh;
		width: 100vw;
	}

	.box {
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.box-wrap {
		width: 600rpx;
		height: 400rpx;
		border-radius: 18rpx;
		background: #fff;
	}

	.text-area {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
